import { defineComponent, provide, shallowRef, useTemplateRef } from 'vue'
import { queryAgentDetailApi } from '@/api/ai-agent/detail'
import { useUserStore } from '@/stores/user'
import BaseConfig from './components/base-config'
import ContentConfig from './components/content-config'
import TestConfig from './components/test-config'

export default defineComponent({
  name: 'agentDetail',
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const user = useUserStore()
    const baseConfigRef = useTemplateRef<typeof BaseConfig>('base-config-ref')
    const agentId = shallowRef('')

    /**
     * 保存
     */
    const save = () => {
      console.log('保存了')
    }

    /**
     * 发布
     */
    const polish = () => {
      console.log('发布了')
    }

    const queryDetail = async () => {
      const params = {
        companyId: user.companyId,
        agentId: props.id,
      }
      const { data } = await queryAgentDetailApi.getData(params)
      const { baseConfig } = queryAgentDetailApi.handleData(data)
      agentId.value = data.id
      baseConfigRef.value.setForm(baseConfig)
    }

    queryDetail()

    provide('agentId', agentId)

    return () => (
      <>
        <div class="h-100% overflow-hidden bg-#ffffff">
          <a-flex
            class="h-68px shadow-[0px_5px_30px_0px_rgba(50,94,181,0.05)] b b-solid b-#EDF1F6 p-l-28px p-r-30px"
            gap="middle"
            justify="space-between"
          >
            <a-space size={12}>
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M15 4.434L7.434 12 15 19.566l1.131-1.132L9.697 12l6.434-6.434z"
                  fill="#242934"
                  fill-rule="nonzero"
                />
              </svg>
              <img class="w-32px h-32px" src="" alt="" />
              <span class="font-size-16px fw-600 color-#242934">产品回访</span>
              <a-tag color="blue">已发布</a-tag>
            </a-space>
            <a-space size={12}>
              <a-button onClick={save}>保存</a-button>
              <a-button type="primary" onClick={polish}>
                发布
              </a-button>
            </a-space>
          </a-flex>
          <div class="h-calc--60px flex">
            <BaseConfig ref="base-config-ref" />
            <ContentConfig />
            <TestConfig />
          </div>
        </div>
      </>
    )
  },
})
